import {createElement} from './utils';
import {ConfigStore} from '../storage/configStore';

/**
 * 渲染全局请求头配置列表
 * @param container 容器元素
 */
export function renderGlobalHeaders(container: HTMLElement) {
  const config = ConfigStore.getConfig();

  // 添加按钮
  const addBtn = createElement('button', {
    className: 'add-header-btn',
  });
  addBtn.textContent = '+ 添加全局请求头';
  container.appendChild(addBtn);

  // 创建请求头列表容器
  const headerList = createElement('div', {
    className: 'global-header-list',
  });
  container.appendChild(headerList);

  // 如果没有数据，显示提示
  if (!config.globalHeaders || Object.keys(config.globalHeaders).length === 0) {
    const emptyTip = createElement('div', {
      attrs: {
        style: `
          text-align: center;
          padding: 40px 0;
          color: #9ca3af;
          font-size: 14px;
        `
      },
    });
    emptyTip.textContent = '暂无全局请求头，点击上方按钮添加';
    headerList.appendChild(emptyTip);
  } else {
    // 渲染已有的全局请求头
    Object.entries(config.globalHeaders || {}).forEach(([key, header]) => {
      const headerItem = createHeaderItem(key, header.value, header.enabled);
      headerList.appendChild(headerItem);
    });
  }

  // 添加按钮点击事件
  addBtn.addEventListener('click', () => {
    const headerItem = createHeaderItem('', '', true);
    headerList.appendChild(headerItem);
    
    // 如果有空提示，移除它
    const emptyTip = headerList.querySelector('[style*="text-align: center"]');
    if (emptyTip) {
      emptyTip.remove();
    }
    
    // 聚焦到第一个输入框
    const firstInput = headerItem.querySelector('input');
    if (firstInput) {
      firstInput.focus();
    }
  });
}

/**
 * 创建请求头项
 */
function createHeaderItem(name: string, value: string, enabled: boolean): HTMLElement {
  const headerItem = createElement('div', {
    className: 'header-item',
  });

  // 添加开关
  const headerStatus = createElement('div', {
    className: 'header-status',
  });
  headerStatus.innerHTML = `
    <label class="switch">
      <input type="checkbox" ${enabled ? 'checked' : ''}>
      <span class="slider"></span>
    </label>
  `;
  
  // 创建名称和值输入框
  const nameInput = createElement('input', {
    className: 'header-name',
    attrs: {
      type: 'text',
      placeholder: 'Header名称',
      value: name
    }
  });
  
  const valueInput = createElement('input', {
    className: 'header-value',
    attrs: {
      type: 'text',
      placeholder: 'Header值',
      value: value
    }
  });
  
  // 创建删除按钮
  const deleteBtn = createElement('button', {
    className: 'delete-header-btn',
  });
  deleteBtn.textContent = '删除';
  
  // 组装元素
  headerItem.appendChild(headerStatus);
  headerItem.appendChild(nameInput);
  headerItem.appendChild(valueInput);
  headerItem.appendChild(deleteBtn);
  
  // 添加事件监听器
  const checkbox = headerStatus.querySelector('input[type="checkbox"]') as HTMLInputElement;
  
  // 监听开关状态变化
  checkbox.addEventListener('change', () => {
    saveHeader(nameInput.value, valueInput.value, checkbox.checked);
  });
  
  // 监听名称和值的变化
  [nameInput, valueInput].forEach(input => {
    input.addEventListener('blur', () => {
      if (nameInput.value.trim()) {
        saveHeader(nameInput.value, valueInput.value, checkbox.checked);
      }
    });
  });
  
  // 删除按钮点击事件
  deleteBtn.addEventListener('click', () => {
    if (nameInput.value.trim()) {
      const config = ConfigStore.getConfig();
      if (config.globalHeaders && config.globalHeaders[nameInput.value]) {
        delete config.globalHeaders[nameInput.value];
        ConfigStore.saveConfig(config);
      }
    }
    headerItem.remove();
    
    // 检查是否所有的头都被删除了，如果是，显示空提示
    const headerList = headerItem.parentElement;
    if (headerList && headerList.children.length === 0) {
      const emptyTip = createElement('div', {
        attrs: {
          style: `
            text-align: center;
            padding: 40px 0;
            color: #9ca3af;
            font-size: 14px;
          `
        },
      });
      emptyTip.textContent = '暂无全局请求头，点击上方按钮添加';
      headerList.appendChild(emptyTip);
    }
  });
  
  return headerItem;
}

/**
 * 保存请求头到配置
 */
function saveHeader(name: string, value: string, enabled: boolean) {
  if (!name.trim()) return;
  
  const config = ConfigStore.getConfig();
  if (!config.globalHeaders) {
    config.globalHeaders = {};
  }
  
  // 如果这是改名操作，需要删除旧的
  const oldName = Object.keys(config.globalHeaders).find(key => 
    key !== name && 
    config.globalHeaders[key].value === value
  );
  
  if (oldName) {
    delete config.globalHeaders[oldName];
  }
  
  config.globalHeaders[name] = {
    value,
    enabled
  };
  
  ConfigStore.saveConfig(config);
}